<template>
    <el-skeleton animated :rows="11" :loading="gjloading">
        <div v-loading="jzloading">
            <div>
                <el-row class="row-bg" id="k1">
                    <el-col :span="8">
                        <el-button style="display: flex;float: left;margin-left: 10px;" type="primary" size="small"
                            @click="xz">新增关卡</el-button>
                    </el-col>
                    <el-col :span="8">
                        <el-input v-model="input" placeholder="根据关键字查询" @input="handchange" class="input-with-select">
                            <template #append>
                                <el-button circle>
                                    <el-icon>
                                        <Search />
                                    </el-icon>
                                </el-button>
                            </template>
                        </el-input>
                    </el-col>
                    <el-col :span="8">
                        <el-row>
                            <el-col :span="6">
                                <el-checkbox label="禁用" v-model="jyong" @change="isBan0" />
                            </el-col>
                            <el-col :span="6">
                                <el-checkbox label="启用" v-model="qyong" @change="isBan1" />
                            </el-col>
                            <el-col :span="6">
                                <el-checkbox label="发布" v-model="fabu" @change="isPublish1" />
                            </el-col>
                            <el-col :span="6">
                                <el-checkbox label="未发布" v-model="wfabu" @change="isPublish0" />
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </div>
            <div style="margin-top: 15px;margin-left: 10px;">
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :key="obj.id" v-for="obj in datas">
                        <div style="margin-top: 5px;">
                            <el-card shadow="hover" style="width: 280px;">
                                <template #header>
                                    <div style="margin-top: -20px;">
                                        <el-row>
                                            <el-col :span="12">
                                                <div style="display:flex;float: left;margin-left: -20px;">
                                                    <el-tag size="mini" type="danger" v-if="obj.isPublish == 0">未发布</el-tag>
                                                    <el-tag size="mini" type="success" v-else>已发布</el-tag>
                                                </div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div style="display:flex;float: right;margin-right: -20px;">
                                                    <el-tag size="mini" type="success" v-if="obj.isBan == 0">已启用</el-tag>
                                                    <el-tag size="mini" type="danger" v-else>未启用</el-tag>
                                                </div>
                                            </el-col>
                                        </el-row>
                                        <div><span style="color: plum;font-weight: 1000;">{{ obj.name }}</span></div>
                                        <div>
                                            <div id="tp">
                                                <div><img :src="(obj.photo)" /></div>
                                            </div>
                                            <el-row style="margin-top: 5px;" gutter="30">
                                                <el-col :span="8">
                                                    <div><el-tag>难度系数:{{ obj.lv }}</el-tag></div>
                                                </el-col>
                                                <el-col :span="8">
                                                    <div><el-tag>小关数量:{{ obj.count }}</el-tag></div>
                                                </el-col>
                                                <el-col :span="8">
                                                    <div><el-tag>{{ obj.labels }}</el-tag></div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </template>
                                    <el-button type="primary" :loading="xq">详情</el-button>
                                    <el-button type="success" :loading="fbu">发布</el-button>
                                    <el-button type="danger" plain :loading="sc" @click="del(obj)">删除</el-button>
                            </el-card>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div id="k2">
                <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[8, 16, 32, 64]"
                    :background="true" layout="total,sizes, prev, pager, next" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </el-skeleton>
</template>
<script lang="ts">
import router from '@/router'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { getLevels, DeleteLevel, PublishLevels, BanLevels } from '../../../api/practice/level/index'
import { ElMessage } from 'element-plus'
export default defineComponent({
    setup() {
        const data = reactive({
            tableData: [],//表格数据
            page: 1,//当前页
            limit: 8,//每页数
            total: 0,//总条数
            gjloading: true,//骨架屏
            datas: [] as any,
            xq: false,
            fbu: false,
            sc: false,
            key: '',
            isPublish: '' as any,
            isBan: '' as any,
            jzloading: false,
            input: '',
            jyong: '',
            qyong: '',
            fabu: '',
            wfabu: '',
            obj:[]
        })
        const events = {
            getdata(key: any, isPublish: any, isBan: any) {
                getLevels({
                    page: data.page,
                    limit: data.limit,
                    key: key,
                    isPublish: isPublish,
                    isBan: isBan
                }).then((res: any) => {
                    console.log('-------', res)
                    data.total = res.data.total
                    data.datas = res.data.data
                    console.log('=========', data.datas)
                    data.gjloading = false
                    data.jzloading = false
                })
            },
            //详情
            info(obj: any) {
                data.jzloading = true
                setTimeout(() => {
                    data.jzloading = false
                    router.push("/practice/level/detail?id=" + obj.id)
                }, 1000)
            },
            //删除
            del(obj: any) {
                data.sc=true
                DeleteLevel({
                    id:obj.id
                }).then((res: any) => {
                    console.log('-------------',res.id)
                    if (res.result == 0) {
                        events.getdata(data.key, data.isPublish, data.isBan);
                        ElMessage({
                            message: '删除成功',
                            type: 'success',
                        })
                        data.sc=false
                    } else {
                        events.getdata(data.key, data.isPublish, data.isBan);
                        ElMessage({
                            message: '删除失败',
                            type: 'error',
                        })
                    }
                })
            },
            //查询
            handchange(e: any) {
                data.jzloading = true;
                data.key = e;
                events.getdata(data.key, data.isPublish, data.isBan);
                if (!e) {
                    data.key = "";
                    events.getdata(data.key, data.isPublish, data.isBan);
                }
            },
            //分页
            handleSizeChange(val: any) {
                data.limit = val
                events.getdata(data.key, data.isPublish, data.isBan);
                data.jzloading = true;
            },
            handleCurrentChange(val: any) {
                data.page = val
                events.getdata(data.key, data.isPublish, data.isBan);
                data.jzloading = true;
            },
            //多选框启用
            isBan0() {
                data.jzloading = true;
                if (data.qyong) {
                    data.isBan = 0;
                    events.getdata(data.key, data.isBan, data.isPublish);
                } else {
                    data.isBan = "";
                    events.getdata(data.key, data.isBan, data.isPublish);
                }
            },
            //多选框禁用
            isBan1() {
                data.jzloading = true;
                if (data.jyong) {
                    data.isBan = 1;
                    events.getdata(data.key, data.isBan, data.isPublish);
                } else {
                    data.isBan = "";
                    events.getdata(data.key, data.isBan, data.isPublish);
                }
            },
            //未发布
            isPublish0() {
                data.jzloading = true;
                if (data.wfabu) {
                    data.isPublish=0
                    events.getdata(data.key, data.isBan, data.isPublish);
                } else {
                    data.isPublish=""
                    events.getdata(data.key, data.isBan, data.isPublish);
                }
            },
            //已发布
            isPublish1() {
                data.jzloading = true;
                if (data.fabu) {
                    data.isPublish=1
                    events.getdata(data.key, data.isBan, data.isPublish);
                } else {
                    data.isPublish=0
                    events.getdata(data.key, data.isBan, data.isPublish);
                }
            },
            //新增
            xz() {
                data.jzloading = true
                setTimeout(() => {
                    data.jzloading = false
                    router.push('/practice/level/add')
                }, 1000)
            }
        }

        onMounted(() => {
            events.getdata(data.key, data.isPublish, data.isBan);
        })

        return {
            ...toRefs(data),
            ...events
        }
    },
})
</script>


<style>
#k1 {
    height: 50px;
    border: 1px paleturquoise solid;
    border-radius: 5px;
}

#tp {
    margin-top: 10px;
    width: 99%;
    height: 140px;
    border: 1px solid gainsboro;
    border-radius: 4px;
}

#db {
    /* height: 50px;
    border: 1px paleturquoise solid;
    border-radius: 5px; */
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

#k2 {
    width: 98%;
    margin-top: 10px;
    height: 50px;
    border: 1px paleturquoise solid;
    border-radius: 5px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}</style>